<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>互联网金融贷款平台</title>
    <style>
        .img-container {
            width: 293px;
            height: 150px;
            background: #F2F2F2;
            margin-bottom: 35px;
            overflow: hidden;
            border: 1px solid #000;
        }

        .img-container > img {
            width: 293px;
            height: 150px;
        }

        .img {
            width: 293px;
            height: 150px;
        }
    </style>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../css/user.css"/>
    <script type="text/javascript" src="../script/jquery.min.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script src="../script/user.js" type="text/javascript"></script>
    <script src="../angularjs/vue.js"></script>
    <script src="../angularjs/axios.min.js"></script>
    <!-- 引入样式eleme -->
    <link rel="stylesheet" href="../angularjs/index.css">
    <!-- 引入组件库 -->
    <script src="../angularjs/index.js"></script>
    <!-- bootstarp -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div id="app">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">金证信贷系统</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="个人中心首页.html"><span></span>首页</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-user"></span>角色: {{nickname}}</a></li>
            <li><a href="javascript:void(0)" @click="logout()"><span class="glyphicon glyphicon-log-in"></span>注销</a>
            </li>
        </ul>

    </div>
    <!--个人中心-->
    <div class="wrapper wbgcolor">
        <div class="w1200 personal">
            <div id="personal-left" class="personal-left">
                <ul>
                    <li class=""><span><a href="个人中心首页.html"><i class="dot dot1"></i>账户总览</a></span></li>
                    <li class=""><span><a href="个人中心-账户设置.html"><i class="dot dot02"></i>账户设置</a> </span></li>
                    <li class="pleft-cur"><span><a href="个人中心-借款记录.html"><i class="dot dot02"></i>查看借款记录</a> </span>
                    </li>
                    <li class=""><span><a href="个人中心-查看申请记录.html"><i class="dot dot02"></i>查看申请记录</a> </span></li>
                    <li class=""><span><a href="../applyforaloan.html"><i class="dot dot02"></i>申请贷款</a> </span></li>
                </ul>
            </div>
            <div class="personal-main">
                <div class="personal-investnote">
                    <h1>
                        <button class="btn btn-primary" @click="return1()">返回</button>
                    </h1>
                    <i><span style="font-size: 28px;color: #000000">申请延期</span></i>


                    <table class="table" style="font-size: 20px">
                        <tr>
                            <td class="text-right col-lg-5">申请延期数</td>
                            <td>
                                <el-select v-model="value" clearable placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-right col-lg-5">申请原因</td>
                            <td>
                                <el-input
                                        type="textarea"
                                        :rows="2"
                                        placeholder="请输入内容"
                                        v-model="textarea">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-right col-lg-5">申请材料</td>
                            <td>


                                <!-- <div>
                                     <div class="img-container"></div>
                                     <input class="img-btn" type="file" id="drivingLicence" name="drivingLicence">
                                 </div>-->


                                <form id="form1" enctype="multipart/form-data">
                                    <div class="img-container"></div>
                                    <input class="img-btn" type="file" id="drivingLicence" name="drivingLicence">
                                </form>

                            </td>
                        </tr>

                        <tr class="text-center">
                            <td colspan="2">
                                <button class="btn btn-success" @click="commit(0)">提交</button>
                            </td>
                        </tr>
                    </table>


                </div>
            </div>
            <div class="clear"></div>
        </div>

        <!--网站底部-->

    </div>
</div>
</body>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            billFormId: null,
            nickname: null,
            Result: {},
            options: [{
                value: '1',
                label: '1'
            }
                , {
                    value: '3',
                    label: '3'
                }
                , {
                    value: '6',
                    label: '6'
                }, {
                    value: '12',
                    label: '12'
                }],
            value: '',
            textarea: ''
        },

        methods: {
            open() {
                this.$message.error(vue.Result.msg + ":" + vue.Result.data);
            }, open2() {
                this.$message({
                    message: '申请成功',
                    type: 'success'
                });
            },
            return1: function () {
                //返回
                location.href = "个人中心-借款记录-查看详情.html"
            },
            commit: function (id) {
                var formData = new FormData();
                var file = document.getElementById('drivingLicence').files[0];
                // var id_token = $('#id_token').val();
                formData.append("file", file);
                axios({
                    method: 'post',
                    url: 'http://localhost:10088/user/upload',
                    data: formData,	//formData作为载体上传文件
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },

                }).then(function (response) {
                    //成功
                    if (response.data.code == 200) {
                        vue.open2();
                        setInterval(() => {
                            location.href = "个人中心首页.html";
                        }, 1000);
                    } else {
                        vue.open();
                    }

                })
            },

            logout: function () {
                //注销
                localStorage.removeItem("token");
                location.href = "login.html"
            },
            init: function () {
                vue.nickname = localStorage.getItem("nickname");
            }

        }

    })

    vue.init();

    //前端页面显示图片
    function previewImg(fileInput, imgDiv) {
        if (window.FileReader) {//支持FileReader的时候
            var reader = new FileReader();
            reader.readAsDataURL(fileInput.files[0]);
            reader.onload = function (evt) {
                imgDiv.innerHTML = "\<img src=" + evt.target.result + "\>";
            }
        } else {//兼容ie9-
            imgDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + fileInput.value + '\)\';"></div>';
        }
    }

    function selectImg(fileInputs, imgDivs) {
        var checkImg = new RegExp("(.jpg$)|(.png$)|(.bmp$)|(.jpeg$)", "i");
        var i = 0;
        for (; i < fileInputs.length && i < imgDivs.length; i++) {
            (function (i) {//立即执行函数；保存i
                fileInputs[i].onchange = function () {
                    if (checkImg.test(fileInputs[i].value)) {
                        previewImg(this, imgDivs[i]);
                    } else {
                        alert("只支持上传.jpg .png .bmp .jpeg;你的选择有误");
                    }
                };
            })(i);
        }

    }

    /* 为IE6 IE7 IE8增加document.getElementsByClassName函数 */
    /MSIE\s*(\d+)/i.test(navigator.userAgent);
    var isIE = parseInt(RegExp.$1 ? RegExp.$1 : 0);
    if (isIE > 0 && isIE < 9) {
        document.getElementsByClassName = function (cls) {
            var els = this.getElementsByTagName('*');
            var ell = els.length;
            var elements = [];
            for (var n = 0; n < ell; n++) {
                var oCls = els[n].className || '';
                if (oCls.indexOf(cls) < 0) continue;
                oCls = oCls.split(/\s+/);
                var oCll = oCls.length;
                for (var j = 0; j < oCll; j++) {
                    if (cls == oCls[j]) {
                        elements.push(els[n]);
                        break;
                    }
                }
            }
            return elements;
        }
    }
    var fileInputs = document.getElementsByClassName("img-btn");//文件选择按钮
    var imgDivs = document.getElementsByClassName("img-container");//图片容器
    selectImg(fileInputs, imgDivs);
</script>
</html>
